<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#"
    py:extends="'../master.kid'">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>Fast Track - People</title>
	<script src="/static/javascript/MochiKit.js" type="text/javascript"></script>
	<script src="/static/javascript/master.js" type="text/javascript"></script>
	
	<script src="/static/javascript/people.js" type="text/javascript"></script>

	<link href="/static/css/master.css" media="screen" rel="Stylesheet" type="text/css" /> 
	<link href="/static/css/people.css" media="screen" rel="Stylesheet" type="text/css" /> 
</head>

<body>

	<div class="yourinfo">
		<h2>Your Information</h2>
		<div id="your_info">
			<table>
				<tr><td><b>Name:</b></td><td id="person_name_$user_person.id">${user_person.displayName}</td></tr>
				<tr><td><b>Username:</b></td><td id="person_id_$user_person.id">${user_person.userId}</td></tr>
				<tr><td><b>Email:</b></td><td id="person_email_$user_person.id">${user_person.emailAddress}</td></tr>
			</table>
			<br />
			<a href="#" onclick="toggle('your_info');toggle('your_info_edit'); return false;">edit</a>
			<a href="#" onclick="toggle('your_info');toggle('your_pass'); return false;">change password</a>
		</div>
		<div id="your_info_edit" class="person_info_edit" style="display: none;">
			<form id="form_your_info_edit" action="edit_person" method="post">
				<table>
					<tr><td><b>Name</b></td><td><input type="text" name="name" value="$user_person.displayName" /></td></tr>
					<tr><td><b>Username</b></td><td><input type="text" name="username" value="$user_person.userId" /></td></tr>
					<tr><td><b>Email</b></td><td><input type="text" name="email" value="$user_person.emailAddress" /></td></tr>
					<input type="hidden" name="personid" value="$user_person.id" />
				</table>
				<a href="#" onclick="edit_person('your_info','your_info_edit','form_your_info_edit'); toggle('your_info');toggle('your_info_edit'); return false;" >save</a>
				<a href="#" onclick="toggle('your_info');toggle('your_info_edit'); return false;" >cancel</a>
			</form>
		</div>
		<div id="your_pass" class="person_pass" style="display: none;">
			<form id="form_your_pass" action="edit_password" method="post" onsubmit="return validate_password('password', 'confirm')">
				<table>
					<tr>
						<td><b>Password</b></td>
						<td><input type="password" name="password" id="password"/></td>
					</tr>
					<tr>
						<td><b>Password Confirm</b></td>
						<td><input type="password" name="confirm" id="confirm"/></td>
					</tr>
				</table>
				<input type="hidden" name="personid" value="$user_person.id"/>
				<br />
				<a href="#" onclick="if (validate_password('password', 'confirm')) { edit_password('your_pass', 'your_info','form_your_pass'); toggle('your_pass');toggle('your_info');return false; }">save</a>
				<a href="#" onclick="toggle('your_pass');toggle('your_info'); return false;">cancel</a>
			</form>
		</div>
	</div>
	
	<br />
	
	<h2>Other People</h2>
	<a style="${('display: block;', 'display: none;')[show_others]}" href="#" id="show_people" onclick="toggle('people');toggle('show_people');toggle('hide_people'); return false;">Click to show all other people.</a>
	<a style="${('display: none;', 'display: block;')[show_others]}" href="#" id="hide_people" onclick="toggle('people');toggle('show_people');toggle('hide_people'); return false;">Click to hide all other people.</a>
	
	<div id="people" style="${('display: none;', 'display: block;')[show_others]}">
		<div class="person" py:for="person in [person for person in people if person.id != user_person.id]" id="person_info_$person.id">
			<a href="#" onclick="toggle('person_details_$person.id'); return false;"><h3 id="person_h3_$person.id" py:content="person.displayName" /></a>
			<div id="person_details_$person.id" style="display: none;">
				<table >
					<tr><td><b>Name:</b></td><td id="person_name_$person.id">${person.displayName}</td></tr>
					<tr><td><b>Username:</b></td><td id="person_id_$person.id">${person.userId}</td></tr>
					<tr><td><b>Email:</b></td><td id="person_email_$person.id"><a href="mailto:$person.emailAddress">${person.emailAddress}</a></td></tr>
				</table>
				<br/>
				<a href="#" onclick="toggle('person_details_$person.id');toggle('person_info_edit_$person.id'); return false;" py:if="'admin' in groupids" id="edit_$person.id">edit</a>
				<a href="#" onclick="toggle('person_details_$person.id');toggle('person_pass_$person.id'); return false;" py:if="'admin' in groupids">change password</a>
			</div>
			
		
			<div id="person_info_edit_$person.id" class="person_info_edit" style="display: none;">
				<form id="form_person_info_edit_$person.id" action="edit_person" method="post">
					<table>
						<tr><td><b>Name</b></td><td><input type="text" name="name" value="$person.displayName" /></td></tr>
						<tr><td><b>Username</b></td><td><input type="text" name="username" value="$person.userId" /></td></tr>
						<tr><td><b>Email</b></td><td><input type="text" name="email" value="$person.emailAddress" /></td></tr>
						<input type="hidden" name="personid" value="$person.id" />
					</table>
					<a href="#" onclick="edit_person('person_info_edit_$person.id', 'person_details_$person.id','form_person_info_edit_$person.id' );toggle('person_details_$person.id');toggle('person_info_edit_$person.id');" >save</a>
					<a href="#" onclick="toggle('person_details_$person.id');toggle('person_info_edit_$person.id'); return false;" >cancel</a>
				</form>
			</div>
			<div id="person_pass_$person.id" class="person_pass" style="display: none;">
			<form id="form_person_pass_$person.id" action="edit_password" method="post" onsubmit="return validate_password('password1', 'confirm1')">
				<table>
					<tr>
						<td><b>Password</b></td>
						<td><input type="password" name="password" id="password1"/></td>
					</tr>
					<tr>
						<td><b>Password Confirm</b></td>
						<td><input type="password" name="confirm" id="confirm1"/></td>
					</tr>
				</table>
				<input type="hidden" name="personid" value="$person.id"/>
				<br />
				<a href="#" onclick="if (validate_password('password1', 'confirm1')) { edit_password('person_details_$person.id', 'person_pass_$person.id','form_person_pass_$person.id'); toggle('person_details_$person.id');toggle('person_pass_$person.id');return false; }">save</a>
				<a href="#" onclick="toggle('person_details_$person.id');toggle('person_pass_$person.id'); return false;">cancel</a>
			</form>
		</div>
			
		</div>
	</div>
	
	
	
	<br/>
	
	<a href="#" onclick="toggle('new_person'); return false;">add person</a>
	<div id="new_person" style="display: none;">
		<form id="form_new_person" action="new_person" method="post" onsubmit="return validate_password('new_password', 'new_confirm')">
			<table>
				<tr><td><b>Name</b></td><td><input type="text" name="name" /></td></tr>
				<tr><td><b>Username</b></td><td><input type="text" name="username" /></td></tr>
				<tr><td><b>Email</b></td><td><input type="text" name="email" /></td></tr>
				<tr><td colspan="2"></td></tr>
				<tr>
					<td><b>Password</b></td>
					<td><input type="password" name="password" id="new_password"/></td>
				</tr>
				<tr>
					<td><b>Password Confirm</b></td>
					<td><input type="password" name="confirm" id="new_confirm"/></td>
				</tr>
			</table>
			<a href="#" onclick="if (validate_password('new_password', 'new_confirm')) { submit('form_new_person'); return false; }">add</a>
			<a href="#" onclick="toggle('new_person'); return false;">cancel</a>
		</form>
	</div>
</body>
</html>
